<!DOCTYPE html>
<html>
    {% include 'www/header.html' %}
<body>
    <div class="layui-container">
        <div class="layui-row" style="margin: 2px 0 2px 0;">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                <div class="layui-card">
                    <!-- 文件地址-->
                    <div class="layui-card-header"><h3>EPG文件地址: <a href="/epg/get_epg_xml">点击预览</a> &nbsp;&nbsp;<a href="/epg/get_epg_url/e.xml" download="e.xml">下载文件</a></h3></div>
                    <!-- 当前时间 -->
                    <div class="layui-card-header"><h3>EPG: 正在播放...</h3></div>
                    <div class="layui-card" style="padding: 0 15px;">
                        <p>当前时间: 
                            <script>
                                document.write(new Date().toLocaleString());
                            </script>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            {% for channel in channels %}                 
            <div class="layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2" style="height: 90px;">
                <div class="layui-card">
                    <div class="layui-item">
                        <div class="layui-card-header"><h3>{{ channel['name'] }}</h3></div>
                        <!-- p元素中内容长度大于父div宽度显示为... -->
                        <div class="layui-card" style="padding: 1px 15px;">
                            <p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; margin: 0;">{{ channel['title'] }}</p>
                            <p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; margin: 0;">{{ channel['start'] }} - {{ channel['end'] }}</p>        
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

{% include 'www/footer.html' %}
<script>
  layui.use(['layer', 'form', 'jquery'], function () {
    var $ = layui.jquery
    var layer = layui.layer
    var form = layui.form
    var jquery = layui.jquery
  })
</script>
<script>

</script>
</body>
</html>
